<template>
  <div class="amap-page-container">
    <div class="toolbar">
      当前坐标: {{ lng }}, {{ lat }}
      <ObjSelectWithIP
        ref="objTree"
        class="inner"
        @treesel="onTreeSelected"
      ></ObjSelectWithIP>
    </div>
    <el-amap
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      class="amap-demo"
      :events="events"
      pitch-enable="false"
      viewMode="3D"
      mapStyle="amap://styles/light"

    >
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="index"
        :events="marker.events"
        :position="marker.position"
      />
      <el-amap-info-window
        v-if="window"
        :position="window.position"
        :visible="window.visible"
        :content="window.content"
        :offset="window.offset"
        :close-when-click-map="true"
        :is-custom="true"
      >
        <div id="info-window">
          <p>{{ window.name }}</p>
          <a class="detail" @click="checkDetail(window.uid)">查看详情</a>
        </div>
      </el-amap-info-window>
    </el-amap>
  </div>
</template>

<script>
import { get } from "@/services/crud";
import ObjSelectWithIP from "@/components/objTree/ObjSelectWithIP.vue";
export default {
  name: "mapView",
  components: { ObjSelectWithIP },
  props: ["searchCenter"],
  data: function () {
    const self = this;
    return {
      data: [],
      zoom: 17,
      center: ["121.599197", "31.205379"],
      expandZoomRange: true,
      markers: [],
      windows: [],
      window: "",
      events: {
        click(e) {
          const { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
        },
      },
      lng: 0,
      lat: 0,
    };
  },
  created() {
    this.refresh();
  },
  methods: {
    onSelectItem(value) {
      let item = this.data.find((d) => {
        return d.uid == value;
      });
      if (item) {
        this.center = [...item.center];
      }
    },
    refresh() {
      //let _this = this;

      let _this = this;
      get("thing", "condition?model_id=m_smartBoxForPolice").then((res) => {
        console.log("0000000000000", res);
        if (res && res.data && res.data.result) {
          _this.data = [];
          res.data.result.forEach((r) => {
            if (!r.lon || !r.lat) {
              return;
            }
            _this.data.push({
              position: r.lon + "," + r.lat,
              name: r.s_name,
              uid: r.uid,
              center: [r.lon, r.lat],
            });
            //_this.center = [r.lon, r.lat];
          });
        }
        _this.point();
      });
      this.$store.dispatch("thingView/refreshAllThings");
    },
    onTreeSelected(obj) {
      if (obj) {
        if (obj.lon && obj.lat) {
          this.center = [obj.lon, obj.lat];

          this.lng = obj.lon;
          this.lat = obj.lat;
        }
      }
    },
    point() {
      const markers = [];
      const windows = [];
      const that = this;
      this.data.forEach((item, index) => {
        markers.push({
          position: item.position.split(","),

          // icon:item.url, //不设置默认蓝色水滴
          events: {
            click() {
              // 方法：鼠标移动到点标记上，显示相应窗体
              that.windows.forEach((window) => {
                window.visible = false; // 关闭窗体
              });
              that.window = that.windows[index];
              that.$nextTick(() => {
                that.window.visible = true;
              });
            },
          },
        });
        windows.push({
          position: item.position.split(","),
          isCustom: true,
          offset: [115, 55], // 窗体偏移
          showShadow: true,
          visible: false, // 初始是否显示
          name: item.name,
          uid: item.uid,
        });
      });
      //  加点
      console.log("--------points---------", markers.length);
      this.markers = markers;
      // 加弹窗
      this.windows = windows;
    },
    checkDetail(uid) {
      this.$store.dispatch("thingView/refreshActiveThing", uid).finally(() => {
        this.$router.push("/real/");
      });
    },
  },
};
</script>



<style  scoped>
a {
  color: rgb(203, 203, 224);
}
a:hover {
  color: #f00;
}
.toolbar {
  text-align: center;
  background: rgba(40, 40, 64, 0);
  color: black;
  top: 20px;
  position: absolute;
  width: 100%;
  z-index: 999;
}
.amap-demo {
  height: 620px;
  margin-top: -20px;
}
.amap-page-container {
  position: relative;
}
#info-window {
  width: 140px;
  height: 60px;
  margin-left: 30px;
  background: rgba(27, 27, 29, 0.9);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
#info-window.detail {
  width: 100%;
  height: 24px;
  color: #fff;
  background-color: #7da6db;
  position: absolute;
  bottom: 0;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}
</style>